<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优秀学员</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1537426_zmse968mns.css">
    <script src="./js/rem.js"></script>
</head>
<style>
    #app{width: 100%;min-width: 20rem;}
    #app .nav{width: 100%; padding:0.9375rem 0;}
    #app .nav i{position: absolute;left: 0.9375rem;top:0.59rem;}
    #app .nav i.iconfont{font-size: 1.875rem!important;}
    #app .nav p{width:4rem;font-weight: 700;}

    #app .wrap{width: 100%;}
    #app .wrap ul{width: 100%;margin-top:0.625rem;}
    #app .wrap ul li{margin:0.625rem 0.9375rem;padding:0.625rem 0rem;border:0.0625rem solid #F4F4F4;border-radius:0.375rem;box-shadow:0rem 0rem 0.3125rem 0.0625rem rgba(0,0,0,0.1);}
    #app .wrap ul li div.headImg{width: 25%;align-content: center;} 
    #app .wrap ul li div.headImg img{width: 4.0625rem;height: 4.0625rem;border-radius:50%;}  
    #app .wrap ul li div.stuInfo{width: 75%;}
    #app .wrap ul li div.stuInfo p{font-size: 1rem;font-family: 'Microsoft YaHei', '宋体', Tahoma, Arial, sans-serif;}
    #app .wrap ul li div.stuInfo p.jobPostion{font-weight: 700;}
    #app .wrap ul li div.stuInfo p.company{padding:0.3125rem 0;font-size: 0.875rem;color:#000;opacity: .5;}
    #app .wrap ul li div.stuInfo p.company i{padding-top:0.0625rem ;}
    #app .wrap ul li div.stuInfo p.company i.iconfont{font-size: 1rem!important;}
    
    #app .wrap ul li div.stuInfo p.experience{font-size: 0.875rem;}
    #app .wrap ul li div.stuInfo p.experience span:nth-child(1){color:#578CE4;}
    #app .wrap ul li div.stuInfo p.experience span:nth-child(2){color:#54AA7A;padding:0rem 0.625rem;}
    #app .wrap ul li div.stuInfo p.experience span:nth-child(3){color:#F2A294;}
    
</style>
<body>
    <div id="app">
        <div class="nav flex justify-center">
            <i class="icon iconfont iconback" @click="back"></i>
            <p>优秀学员</p>
        </div>
        <div class="wrap">
            <ul>
                <li class="flex" v-for="item in stuInfo" @click="jump">
                    <!-- 头像 -->
                    <div class="headImg flex justify-center">
                        <img :src="item.headImg" alt="">
                    </div>
                    <!-- 学生信息 -->
                    <div class="stuInfo">
                        <p class="jobPosition" v-text="item.jobPosition"></p>
                        <p class="company flex justify-between">
                            <span v-text="'入职公司:'+item.company"></span>
                            <i class="icon iconfont iconmore"></i>
                        </p>
                        <p class="experience">
                            <span v-text="'薪资待遇:'+item.salary"></span>
                            <span v-text="'学历:'+item.education">学历：本科</span>
                            <span v-text="'工作经验:'+item.experience"></span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./js/rem.js"></script>
<script>
 var app = new Vue({
     el:'#app',
     data:{
        stuInfo:[{
            headImg:'./img/head1.png',
            jobPosition:'Java开发工程师-黄一璐',
            company:'浙江百代信息技术有限公司',
            salary:'8K',
            education:'本科',
            experience:'半年'
        },
        {
            headImg:'./img/head2.png',
            jobPosition:'Html前端开发-张三斤',
            company:'浙江百代信息技术有限公司',
            salary:'8K',
            education:'本科',
            experience:'半年'
        },
        {
            headImg:'./img/head3.png',
            jobPosition:'项目经理-杨不凡',
            company:'浙江百代信息技术有限公司',
            salary:'8K',
            education:'本科',
            experience:'半年'
        },
        {
            headImg:'./img/touxiang.png',
            jobPosition:'Java开发工程师-周不易',
            company:'浙江百代信息技术有限公司',
            salary:'8K',
            education:'本科',
            experience:'半年'
        }]

     },
     methods: {
         jump:function(){
           window.location.href='./entryDetails.html'
         },
         back:function(){
            window.location.href='./index.html';
            window.history.back(-1); 
         }
     },
     
 })
</script>
</html>